<template>
	<view class="navBar">
		<u-navbar :title="title" @leftClick="toMy" :placeholder="true" titleStyle="color: #fff">
			<view slot="left" v-if="isSlot">
				<image :src="userInfo.avatar" v-if="isNav"></image>
			</view>
		</u-navbar>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: "navBar",
		props: {
			title: {
				type: String,
				required: true
			},
			isNav: {
				type: Boolean,
				required: true
			},
			isSlot: {
				type: Boolean,
				required: true
			}
		},
		data() {
			return {
				h: 0
			};
		},
		created() {
			this.system()
		},
		methods: {
			toMy() {
				if (this.title == "上传" || this.title == "博客") {
					uni.switchTab({
						url: "/pages/index/index"
					})
				} else {
					uni.switchTab({
						url: "/pages/my/my",
					})
				}
			},
			system() {
				const systems = uni.getSystemInfoSync()
				const res = (systems.statusBarHeight + 44) / (uni.upx2px(systems.statusBarHeight + 44) / (systems
					.statusBarHeight + 44))
				this.h = res
			}
		},
		computed: {
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss">
	.navBar {
		image {
			width: 30px;
			height: 30px;
			border-radius: 50%;
		}
	}

	::v-deep .u-navbar__content {
		background: linear-gradient(to right, #d1c2d3, #ffb5cb, #ffb091);
		// background-image: linear-gradient(to right, #c6e6e8, #a5d8dd, #82cad3, #59bcca, #10aec2);
	}

	/*	#ifdef MP-WEIXIN */
	::v-deep nav-bar >view >view >view >view:nth-child(2){
		background: linear-gradient(to right, #d1c2d3, #ffb5cb, #ffb091) !important;
	}

	/* #endif */
</style>
